<template>
  <el-card>
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="query.nickName"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            plain
            @click="loadTickets"
          ></el-button>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="query.dateRange"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" plain  @click="loadTickets"></el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="success" @click="dialog.addShow = true"
            >新建</el-button
          >
        </el-form-item> -->
      </el-form>
    </div>
    <el-table
      :data="workTicketList"
      border
      style="width: 100%"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="ticketId" label="工单ID" width="100px">
      </el-table-column>
      <el-table-column prop="ticketNo" label="工单编号"> </el-table-column>
      <el-table-column prop="ordersNo" label="订单编号" width="200px"> </el-table-column>
      <el-table-column prop="ticketTime" label="创建时间"> </el-table-column>
      <el-table-column prop="nickName" label="负责人"> </el-table-column>
      <el-table-column prop="status" label="工单状态">
        <template slot-scope="scope">
          {{ scope.row.status == 0 ? "未完成" : "已完成" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="handleEdit(scope.row.ticketId)"
            >编辑</el-button
          >
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.row.ticketId)"
          >
            <el-button
              type="danger"
              slot="reference"
              size="small"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>
          <el-button
            type="info"
            icon="el-icon-edit"
            size="small"
            @click="handleLook(scope.row.ticketId)"
            >查看明细</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="生产" width="100px">
        <template slot-scope="scope">
          <el-button type="success" @click="handleTicketId(scope.row.ticketId)"
            >生产</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="pageInfo.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
    <!-- --------------------------添加---------------------- -->
    <el-dialog title="添加工单" :visible.sync="dialog.addShow" width="30%">
      <el-form ref="addForm" :model="addForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="工单编号">
              <el-input
                v-model="addForm.ticketNo"
                placeholder="请输入工单编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input
                v-model="addForm.ordersNo"
                placeholder="请输入订单编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="负责人">              
              <el-cascader
                v-model="optionList"
                :options="options"
                @change="handleOptionChange"
                style="width: 100%"
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="addForm.ticketTime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="工单状态">
              <el-select
                v-model="addForm.status"
                placeholder="请选择状态"
                style="width: 100%"
              >
                <el-option :key="0" label="未完成" :value="0"> </el-option>
                <el-option :key="1" label="已完成" :value="1"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addShow = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- --------------------------领料出库---------------------- -->
    <el-dialog title="领料出库" :visible.sync="dialog.addInOutShow" width="60%">
      <el-form ref="addInOutForm" :model="addInOutForm">
        <el-row>
          <el-form-item label="领料人工号">
            <el-cascader
              v-model="optionList"
              :options="options"
              @change="handleOptionChange"
              style="width: 100%"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="工单id" hidden>
            <el-input v-model="addInOutForm.ticketId"></el-input>
          </el-form-item>
          <el-form-item label="工序流程">
            <el-table :data="operationProcedureList">
              <el-table-column
                prop="operationProcedureContent"
                label="流程目标"
                style="width:100px;"
              ></el-table-column>
              <el-table-column label="工序流程">
                <template slot-scope="scope">
                  <el-steps :active="1">
                    <el-step
                      v-for="(item,index) in scope.row.operationProcedures"
                      v-bind:key="index"
                      :title="item.proDetailContent"
                    ></el-step>
                  </el-steps>
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作">
                  <el-button type="text" size="small"> 编辑 </el-button>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addInOutShow = false">取 消</el-button>
        <el-button type="primary" @click="matOut()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- --------------------------修改---------------------- -->
    <el-dialog title="编辑工单" :visible.sync="dialog.updateShow" width="30%">
      <el-form ref="updateForm" :model="updateForm" label-width="90px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="工单编号">
              <el-input v-bind:value="updateForm.ticketNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input v-bind:value="updateForm.ordersNo" disabled></el-input>
            </el-form-item>
            <!-- <el-form-item label="负责人">
              <el-input
                v-model="updateForm.workNo"
                placeholder="请输入负责人"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="负责人">              
              <el-cascader
                v-model="optionList"
                :options="options"
                @change="handleOptionChange"
                style="width: 100%"
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="updateForm.ticketTime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="工单状态">
              <el-select
                v-model="updateForm.status"
                placeholder="请选择状态"
                style="width: 100%"
              >
                <el-option :key="0" label="未完成" :value="0"> </el-option>
                <el-option :key="1" label="已完成" :value="1"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="编号" hidden>
              <el-input v-model="updateForm.ticketId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateShow = false">取 消</el-button>
        <el-button type="primary" @click="updateTickets()">确 定</el-button>
      </span>
    </el-dialog>
    <el-drawer
      title="订单详情列表"
      :visible.sync="drawer.lookDetails"
      direction="rtl"
      size="50%"
    >
      <el-table
        :data="ticketsDetailsList"
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column
          property="ticketdetailId"
          label="编号"
          width="80"
        ></el-table-column>
        <el-table-column
          property="ticketNo"
          label="工单编号"
          width="175"
        ></el-table-column>
        <el-table-column
          property="productName"
          label="产品名称"
          width="80"
        ></el-table-column>
        <el-table-column
          property="count"
          label="需求产品数"
          width="110"
        ></el-table-column>
        <el-table-column
          property="finishCount"
          label="完成产品数"
          width="110"
        ></el-table-column>
        <el-table-column
          property="remark"
          label="备注"
          width="200"
        ></el-table-column>
      </el-table>
    </el-drawer>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      optionList: [],
      operationProcedureList: [],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      options: [],
      optionList: [],
      updateForm: {},
      addForm: {},
      addInOutForm: {},
      drawer: {
        lookDetails: false,
      },
      dialog: {
        addShow: false,
        updateShow: false,
        addInOutShow: false,
      },
      pageInfo: {
        pageSizes: [5, 10, 20, 30],
        total: 0,
      },
      query: {
        currentPage: 1,
        pageSize: 5,
        dateRange: [],
        nickName:""
      },
      workTicketList: [],
      ticketsDetailsList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    handleOptionChange() {
      this.addInOutForm.workNo = this.optionList[this.optionList.length - 1];
    },
    loadOptions() {
      this.$axios
        .post("/emps/4")
        .then((res) => {
          if (res.data.code == 200) {
            this.options = res.data.data.vos;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    loadoperationProcedureList() {
      this.$axios.get("/process/select").then((res) => {
        if (res.data.code == 200) {
          this.operationProcedureList = res.data.data.list;
        }
      });
    },

    handleSizeChange(val) {
      this.query.pageSize = val;
      this.loadTickets();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.loadTickets();
    },
    loadTickets() {
      this.$axios.post("tickets/queryAll", this.query).then((res) => {
        this.workTicketList = res.data.data.list;
        this.pageInfo.total = res.data.data.total;
      });
    },
    handleTicketId(ticketId) {
      this.dialog.addInOutShow = true;
      this.addInOutForm.ticketId = ticketId;
    },
    handleLook(ticketId) {
      this.$axios.get("tickets/allDetails/" + ticketId).then((res) => {
        if (res.data.code == 200) {
          //this.$message.success(res.data.message);
          this.drawer.lookDetails = true;
          // this.loadDetails();
          this.ticketsDetailsList = res.data.data.detailsVOS;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    add() {
      this.$axios.post("tickets", this.addForm).then((res) => {
        if (res.data.code == 200) {
          this.addForm = {};
          this.$message.success(res.data.message);
          this.dialog.addShow = false;
          this.loadTickets();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    matOut() {
      this.$axios.put("tickets/product", this.addInOutForm).then((res) => {
        if (res.data.code == 200) {
          this.addInOutForm = {};
          this.$message.success(res.data.message);
          this.dialog.addInOutShow = false;
          this.loadTickets();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleEdit(ticketId) {
      this.$axios.get("tickets/" + ticketId).then((res) => {
        this.updateForm = res.data.data.worktickets;
      });
      this.dialog.updateShow = true;
    },
    updateTickets() {
      this.$axios.put("tickets", this.updateForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.dialog.updateShow = false;
          this.loadTickets();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },

    handleDelete(ticketId) {
      this.$axios.delete("tickets/" + ticketId).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.loadTickets();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  },
  mounted() {
    this.loadTickets();
    this.loadOptions();
    this.loadoperationProcedureList();
  },
};
</script>